<style>
  .pb-standalone img {width: 23%;margin: 1%;float: left;}
  .list-block .item-input {margin: 0;}
</style>

<div class="page">
  <header class="bar bar-nav">
    <h1 class="title">商品详情</h1>
  </header>
  <div class="content">
      <!--<p style="margin:.5em 0;">A2 Platinum Infant Formula Stage 1</p>-->
      <!--<p style="margin:.5em 0;">白金系列1段婴儿配方奶粉</p>-->
      <div class="list-block" style="font-size: .8rem;">
        <ul>
          <!-- Text inputs -->
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">英文名</div>
                <div class="item-input">
                  <div>A2 Platinum Infant Formula Stage 1</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">中文名</div>
                <div class="item-input">
                  <div>白金系列1段婴儿配方奶粉</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">规格</div>
                <div class="item-input">
                  <div>900G</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">类型</div>
                <div class="item-input">
                  <div>婴儿奶粉</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">条码</div>
                <div class="item-input">
                  <div>9421902960031</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">图片</div>
                <div class="item-input">
                  <div class="pb-standalone">
                    <img src="//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg" >
                    <img src="//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg" >
                    <img src="//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg" >

                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">零售价</div>
                <div class="item-input">
                  <div>666元</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">数量</div>
                <div class="item-input">
                  <div><input type="number" value="1"/></div>
                </div>
              </div>
            </div>
          </li>


        </ul>
      </div>
    <div class="content-block" style="padding: 0 .5rem;margin-bottom: 2rem;">
        <a href="#" class="button button-big button-fill button-warning">加入购物车</a>
    </div>
  </div>

</div>
<script>
  $(function(){
    /*=== 默认为 standalone ===*/
    var myPhotoBrowserStandalone = $.photoBrowser({
      photos : [
        '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
        '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
        '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
      ]
    });
    //点击时打开图片浏览器
    $(document).on('click','.pb-standalone',function () {
      myPhotoBrowserStandalone.open();
    });

  })
</script>

